<!--
 * @Author: your name
 * @Date: 2021-06-18 20:38:01
 * @LastEditTime: 2022-05-15 18:23:45
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \lix-vue2-demos\src\views\demo\apply\CountDown.vue
-->
<template>
  <el-card>
    <div slot="header">计算倒数时间</div>
    <div>
      <el-date-picker
        v-model="dateTime"
        type="datetime"
        placeholder="选择日期时间"
        :picker-options="pickerOptions"
        @change="handleDatePickerChange"
      >
      </el-date-picker>
      剩余：{{ remainTime }}
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'ex-others',
  data() {
    return {
      dateTime: '',
      remainTime: '--天--时--分--秒',
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() < Date.now()
        }
      }
    }
  },
  created() {},

  methods: {
    /**
     * @description: 日期时间选中事件
     * @param {*} val
     * @return {*}
     */
    handleDatePickerChange(val) {
      console.log('dateval', val)
      if (val == null) {
        this.remainTime = '--天--时--分--秒'
        return
      }
      this.remainTime = this.countDown(val)
    },
    /**
     * @description: 计算剩余时间
     * @param {*} inputTime
     * @return {*}
     */
    countDown(inputTime) {
      var nowTime = +new Date()
      var times = (+inputTime - nowTime) / 1000

      var d = parseInt(times / 60 / 60 / 24)
      d = d < 10 ? '0' + d : d
      var h = parseInt((times / 60 / 60) % 24)
      h = h < 10 ? '0' + h : h
      var m = parseInt((times / 60) % 60)
      m = m < 10 ? '0' + m : m
      var s = parseInt(times % 60)
      s = s < 10 ? '0' + s : s

      return d + '天' + h + '时' + m + '分' + s + '秒'
    }
  }
}
</script>
<style lang="less" scoped>
// 轮播图
</style>
